<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="origin">

    {{#if title}}
    <title>{{ title }}</title>
    {{else}}
    <title>GraphiQL IDE</title>
    {{/if}}

    <style>
      body {
        height: 100%;
        margin: 0;
        width: 100%;
        overflow: hidden;
      }

      #graphiql {
        height: 100vh;
      }
    </style>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <link rel="icon" href="https://graphql.org/favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/graphiql@{{ version }}/graphiql.min.css" />
    {{! plugins head assets }}
    {{#if plugins}}
      {{#each plugins}}
        {{#if head_assets}}
    {{&head_assets}}
        {{/if}}
      {{/each}}
    {{/if}}
    {{! end plugins head assets }}
  </head>

  <body>
    <div id="graphiql">Loading...</div>
    <script
      src="https://unpkg.com/graphiql@{{ version }}/graphiql.min.js"
      type="application/javascript"
    ></script>
    {{! plugins body assets }}
    {{#if plugins}}
      {{#each plugins}}
        {{#if body_assets}}
    {{&body_assets}}
        {{/if}}
      {{/each}}
    {{/if}}
    {{! end plugins body assets }}
    <script>
      customFetch = (url, opts = {}) => {
        return fetch(url, {...opts, credentials: '{{ credentials }}'})
      }

      createUrl = (endpoint, subscription = false) => {
        const url = new URL(endpoint, window.location.origin);
        if (subscription) {
          url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
        }
        return url.toString();
      }

      {{! loading plugins }}
      {{#if plugins}}
      const plugins = [];
        {{#each plugins}}
            {{#if pre_configs}}
        {{&pre_configs}}
            {{/if}}
            {{#if constructor}}
      plugins.push({{constructor}}({{&props}}));

            {{/if}}
        {{/each}}
      {{/if}}
      {{! end loading plugins }}
      ReactDOM.createRoot(document.getElementById("graphiql")).render(
        React.createElement(GraphiQL, {
          fetcher: GraphiQL.createFetcher({
            url: createUrl('{{ endpoint }}'),
            fetch: customFetch,
            {{#if subscription_endpoint}}
            subscriptionUrl: createUrl('{{ subscription_endpoint }}', true),
            {{/if}}
            {{#if headers}}
            headers: {
              {{#each headers}}'{{@key}}': '{{this}}',{{/each}}
            },
            {{/if}}
            {{#if ws_connection_params}}
            wsConnectionParams: {
              {{#each ws_connection_params}}'{{@key}}': '{{this}}',{{/each}}
            },
            {{/if}}
          }),
          defaultEditorToolsVisibility: true,
          {{#if plugins}}
          plugins,
          {{/if}}
        })
      );
    </script>
  </body>
</html>